<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .container {
            height: 500px;
            border: solid 1px red;
            overflow-y: auto;
        }

        img {
            display: block;
            margin-bottom: 50px;
            /*width: 300px;*/
            height: 300px;
            border: solid 1px;
        }
    </style>
</head>
<body>
<div id="container" class="container">
    <img src="img/loading.jpg" data-src="./img/img1.png" alt="">
    <img src="img/loading.jpg" data-src="./img/img2.png" alt="">
    <img src="img/loading.jpg" data-src="./img/img3.png" alt="">
    <img src="img/loading.jpg" data-src="./img/img4.png" alt="">
    <img src="img/loading.jpg" data-src="./img/img5.png" alt="">
    <img src="img/loading.jpg" data-src="./img/img6.png" alt="">
    <img src="img/loading.jpg" data-src="./img/img7.png" alt="">
    <img src="img/loading.jpg" data-src="./img/img8.png" alt="">
    <img src="img/loading.jpg" data-src="./img/event.png" alt="">
</div>
<script>
    const domImages = document.getElementsByTagName('img');
    const domContainer = document.getElementById('container');
    let loadIndex = 0;

    function lazyLoad() {
        // 容器可视区域高度
        let clientHeight = domContainer.clientHeight;
        // 容器滚动的高度
        let scrollTop = domContainer.scrollTop;
        // console.log('clientHeight', clientHeight);
        // console.log('scrollTop', scrollTop);
        [...domImages].forEach((item, index) => {
            const offsetTop = item.offsetTop;
            // console.log('offsetTop', item.getAttribute('data-src'), offsetTop);
            if (offsetTop < clientHeight + scrollTop && (index >= loadIndex)) {
                item.src = item.getAttribute('data-src');
                loadIndex++;
            }
        });
    }

    lazyLoad();
    domContainer.onscroll = lazyLoad;
</script>
</body>
</html>